<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>试卷批改 - 智慧教育考试系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#FF9F43',
            neutral: '#F8FAFC',
            'neutral-dark': '#334155',
            'status-pending': '#FFB800',
            'status-active': '#36D399',
            'status-expired': '#94A3B8'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .nav-hover {
        @apply transition-all duration-300 hover:bg-primary/10 hover:text-primary;
      }
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg transition-all duration-300 hover:bg-primary/90 active:bg-primary/80;
      }
      .btn-secondary {
        @apply bg-white border border-gray-200 text-neutral-dark px-4 py-2 rounded-lg transition-all duration-300 hover:bg-gray-50 active:bg-gray-100;
      }
      .btn-exam {
        @apply bg-secondary text-white px-3 py-1.5 rounded-lg transition-all duration-300 hover:bg-secondary/90 active:bg-secondary/80;
      }
      .status-badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
      }
      .status-pending {
        @apply bg-yellow-100 text-yellow-800;
      }
      .status-graded {
        @apply bg-green-100 text-green-800;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-neutral-dark min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white border-b border-gray-200 sticky top-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa fa-graduation-cap text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">智慧教育考试系统</h1>
      </div>

      <div class="flex items-center space-x-6">
        <div class="hidden md:flex items-center space-x-4">
          <button class="text-gray-500 hover:text-primary transition-colors relative">
            <i class="fa fa-bell-o"></i>
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-accent text-white text-xs rounded-full flex items-center justify-center">3</span>
          </button>
          <button class="text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-cog"></i>
          </button>
        </div>

        <div class="flex items-center space-x-2">
          <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-user"></i>
          </div>
          <span class="hidden md:inline">{{ teacher.name if teacher else '教师' }}</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h2 class="text-2xl font-bold text-neutral-dark mb-2">试卷批改</h2>
      <p class="text-gray-500">查看和批改学生提交的考试答案</p>
    </div>

    <!-- 考试信息卡片 -->
    <div class="bg-white rounded-xl card-shadow p-6 mb-6">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h3 class="text-xl font-semibold text-neutral-dark mb-1">{{ exam.name }}</h3>
          <div class="flex flex-wrap items-center gap-3 text-sm text-gray-500">
            <span><i class="fa fa-book mr-1"></i>{{ exam.subject }}</span>
            <span><i class="fa fa-users mr-1"></i>{{ exam.student_count }}人</span>
            <span><i class="fa fa-clock-o mr-1"></i>{{ exam.exam_duration }}分钟</span>
            <span><i class="fa fa-tag mr-1"></i>{{ exam.exam_type }}</span>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="text-sm">
            <span class="text-gray-500">提交人数：</span>
            <span class="font-semibold text-primary">{{ submitted_count }}</span>
            <span class="text-gray-500">/ {{ exam.student_count }}</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500">批改人数：</span>
            <span class="font-semibold text-secondary">{{ graded_count }}</span>
            <span class="text-gray-500">/ {{ submitted_count }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 学生答案列表 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <h3 class="text-lg font-semibold text-neutral-dark">学生答案列表</h3>

          <!-- 筛选和搜索 -->
          <div class="flex items-center gap-3">
            <div class="relative">
              <input type="text" id="search-input" placeholder="搜索学生姓名..."
                class="pl-9 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary text-sm">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <select id="status-filter" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary text-sm">
              <option value="all">全部状态</option>
              <option value="pending">未批改</option>
              <option value="graded">已批改</option>
            </select>
          </div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生姓名</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交时间</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">得分</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            {% for student in students %}
            <tr class="hover:bg-gray-50 student-row" data-status="{{ 'graded' if student.score is not none else 'pending' }}" data-name="{{ student.name }}">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <i class="fa fa-user text-primary text-sm"></i>
                  </div>
                  <span class="font-medium text-neutral-dark">{{ student.name }}</span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ student.class_name }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ student.submitted_at.strftime('%Y-%m-%d %H:%M') if student.submitted_at else '未知' }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                {% if student.score is not none %}
                  <span class="font-semibold text-primary">{{ "%.1f"|format(student.score) }}</span>
                {% else %}
                  <span class="text-gray-400">未评分</span>
                {% endif %}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                {% if student.score is not none %}
                  <span class="status-badge status-graded">已批改</span>
                {% else %}
                  <span class="status-badge status-pending">未批改</span>
                {% endif %}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <a href="{{ url_for('Correction.grade_exam', exam_id=exam.id, student_id=student.id) }}"
                  class="text-primary hover:text-primary/80 font-medium">
                  <i class="fa fa-edit mr-1"></i>批改
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {% if not students %}
      <div class="px-6 py-12 text-center">
        <i class="fa fa-inbox text-4xl text-gray-300 mb-4"></i>
        <p class="text-gray-500">暂无学生提交的答案</p>
      </div>
      {% endif %}
    </div>
  </main>

  <script>
    // 搜索功能
    document.getElementById('search-input').addEventListener('input', function(e) {
      const searchTerm = e.target.value.toLowerCase();
      const rows = document.querySelectorAll('.student-row');

      rows.forEach(row => {
        const name = row.dataset.name.toLowerCase();
        if (name.includes(searchTerm)) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    });

    // 状态筛选功能
    document.getElementById('status-filter').addEventListener('change', function(e) {
      const filterValue = e.target.value;
      const rows = document.querySelectorAll('.student-row');

      rows.forEach(row => {
        const status = row.dataset.status;
        if (filterValue === 'all' || status === filterValue) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>